<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDesv6a_n9h9dXhwiqyfFiZIYuGH1seSck&sensor=false"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script id="dealerTemplate" type="text/x-handlebars-template">
    \{{#each dealers}}
    <div class="dealer">
        <h3>\{{name}}</h3>
        \{{address1}} <br/>
        \{{#if address2}} \{{address2}} <br/> \{{/if}}
        \{{city}}, \{{state}} \{{zip}} <br/>
        \{{#if country}} \{{country}} <br/> \{{/if}}
        \{{#if phone}} \{{phone}} <br/> \{{/if}}
        \{{#if website}} <a href="{{website}}">{{website}}</a> <br/> \{{/if}}
    </div>
    \{{/each}}
</script>
{{#section 'jquery'}}
    <script>
        var map;
        var dealerTemplate = Handlebars.compile($('#dealerTemplate').html());
        $(document).ready(function () {
            var mapOptions = {
                center: new google.maps.LatLng(37.550339, 104.114129),
                zoom: 4
            };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);
            $.getJSON('/dealers.json', function (dealers) {
                dealers.forEach(function (dealer) {
                    if (!dealer.lat || !dealer.lng) return;
                    var pos = new google.maps.LatLng(dealer.lat, dealer.lng);
                    var marker = new google.maps.Marker({
                        position: pos,
                        map: map,
                        title: dealer.name
                    });
                });
                $('#dealerList').html(dealerTemplate({dealers: dealers}));
            });
        });
    </script>
{{/section}}
<div class="dealers">
    <div id="map"></div>
    <div id="dealerList"></div>
</div>